<template>
  <input 
    class="myipt" 
    @input="handlerinput" 
    :value="value"
    :class="{success:statu,error:!statu}"
    @change='handlerchange' />
</template>

<script>
export default {
  data () {
    return {
      statu:true
    }
  },
  // 如果你设置了props属性，那么就会优先为这个属性赋值
  props: {
    value: "",
    rules: RegExp, // 代码正则规则
    msg: String, // 代表输入不合法时的验证信息
  },
  mounted() {
    console.log(this.value);
  },
  methods: {
    handlerinput(e) {
      let value = e.target.value;
      // 验证当前用户的输入是否合法
      if(this.rules){
        if (this.rules.test(value)) {
          this.statu = true
        }else{
          this.statu = false
        }
      }
      // 事件类型一定要叫input
      this.$emit("input", value);
    },
    handlerchange(e){
      let value = e.target.value;
      if(this.rules && !this.rules.test(value)){
        this.$toast.fail(this.msg || '输入错误')
      }
    }
  },
};
</script>

<style lang="less" scoped>
.myipt {
  width: 318/360 * 100vw;
  height: 60px;
  outline: none;
  border: none;
  border-bottom: 3px solid #ccc;
  font-size: 20px;
  line-height: 60px;
}
.success {
  border-bottom-color: green;
}
.error {
  border-bottom-color: red;
}
</style>